import React, { ChangeEvent } from 'react'

interface IProps {
  checked: boolean;
  name: string;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void
}
/**
 * @title switch 多选框
 * @param props 
 */
export default function GmSwitch(props: IProps) {
  const { name = 'name', checked, onChange } = props;
  return (
    <div className="gm-switch">
      <input type="checkbox" id={name} checked={checked} onChange={onChange} />
      <label htmlFor={name}></label>
      <style jsx>{`
        /* 隐藏 input[type="checkbox"] -- 原理label绑定了input */
        .gm-switch input[type="checkbox"] {
          position: absolute;
          clip: rect(0, 0, 0, 0);
        }
        label {
          position: relative;
          height: 20px;
          /* width: 40px; 换成 padding*/
          padding-left: 20px;
          padding-right: 20px;
          background: lightgrey;
          border-radius: 10px;
          cursor: pointer;
          user-select: none;
          transition: background .3s;
        }
        input[type="checkbox"]:disabled + label {
          cursor: not-allowed;
          opacity: .5;
        }
        label::before,
        label::after {
          transition: all .3s;
          position: absolute;
        }
        label::before {
          content: '关';
          font-size: 12px;
          line-height: 12px;
          top: 4px;
          left: 22px;
          color: white;
        }
        label::after {
          content: '';
          top: 1px;
          left: 1px;
          width: 18px;
          height: 18px;
          border-radius: 9px;
          background: white;
        }
        input[type="checkbox"]:checked + label {
          background: #b4a078;
        }
        input[type="checkbox"]:checked + label::before {
          content: '开';
          left: 6px;
        }
        input[type="checkbox"]:active + label::after {
          width: 23px;
        }
        input[type="checkbox"]:checked + label::after {
          left: 21px;
        }
        input[type="checkbox"]:checked:active + label::after {
          left: 16px;
        }
      `}</style>
    </div>
  )
}
